<script setup lang="ts">
import useRouteReplace from '@/hooks/useRouteReplace'
import { NButton, NImage } from 'naive-ui'
import { useRoute } from 'vue-router'

import FixedAction from '@/components/FixedAction.vue'
import VBackImg from '@/assets/images/back.png'
import BatchInfo from './BatchInfo.vue'
import PersonnelInfo from './PersonnelInfo.vue'
import DjCuleList from './DjCuleList.vue'
import ApprovalInfo from './ApprovalInfo.vue'
import ApprovalRecord from './ApprovalRecord.vue'
import RecordHandles from './RecordHandles.vue'
import { onMounted } from 'vue'

const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
// const recordId = route.query.id as string
// useRouteParam('id', main)

onMounted(() => {
  document.querySelector('#layout-content')!.scrollTop = 0
})
</script>

<template>
  <DetailFormProvider>
    <div class="dj-record">
      <RecordHandles />
      <BatchInfo />
      <div class="br"></div>
      <PersonnelInfo />
      <div class="br"></div>
      <DjCuleList />
      <div class="br"></div>
      <ApprovalInfo />
      <div class="br"></div>
      <ApprovalRecord />
    </div>
  </DetailFormProvider>

  <FixedAction>
    <div class="dj-record-buttons">
      <NButton
        ghost
        @click="routeReplace"
        :style="`width: 78px; height: 34px; color: #5fb17f`"
      >
        <template #icon>
          <NImage
            :src="VBackImg"
            :style="`width: 50rem; height: 50rem`"
            preview-disabled
          ></NImage>
        </template>
        返回
      </NButton>
    </div>
  </FixedAction>
</template>

<style scoped lang="scss">
.dj-record {
  min-height: 100%;
  padding: 16rem 16rem 110rem;
  background-color: #ebeceb;

  .br {
    position: relative;
    width: 100%;
    padding: 30rem 0;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      top: 50%;
      left: 0;
      border-top: 1px dotted #bc9e70;
      transform: translateY(-50%);
    }
  }
}

.dj-record-buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0 16rem;

  .n-button {
    width: 100rem;
    height: 50rem;
  }
}
</style>
